<template>
  <view class="content-box">
    <view class="content-box-item">
      <view class="title">{{ $t("dashboard.totalInstalledCapacity") }}</view>

      <view class="bottom-content">
        <view class="num">
          <text> {{ chargeUnit(dataPage.totalCapacity, 0) }}</text>
          <text class="unit">{{ chargeUnit(dataPage.totalCapacity, 1) }}</text>
        </view>
        <image src="/static/dashboard/capacity.png" mode="" />
      </view>
    </view>
    <view class="content-box-item">
      <view class="title">
        {{ $t("dashboard.totalInstalledPower") }}
        <!-- 总装机功率 -->
      </view>
      <view class="bottom-content">
        <view class="num">
          <text>{{ powerUnit(dataPage.totalPower, 0) }}</text>
          <text class="unit">{{ powerUnit(dataPage.totalPower, 1) }}</text>
        </view>
        <image src="/static/dashboard/power.png" mode="" />
      </view>
    </view>
    <view class="content-box-item">
      <view class="title">
        {{ $t("dashboard.totalCharge_detail") }}
        <!-- 总充电量 -->
      </view>
      <view class="bottom-content">
        <view class="num">
          <text>{{ chargeUnit(dataPage.totalCharge, 0) }}</text>
          <text class="unit">{{ chargeUnit(dataPage.totalCharge, 1) }}</text>
        </view>
        <image src="/static/dashboard/charge.png" mode="" />
      </view>
    </view>
    <view class="content-box-item">
      <view class="title">
        {{ $t("dashboard.totalDischarge_detail") }}
        <!-- 总放电量 -->
      </view>

      <view class="bottom-content">
        <view class="num">
          <text>{{ chargeUnit(dataPage.totalDisCharge, 0) }}</text>
          <text class="unit">{{ chargeUnit(dataPage.totalDisCharge, 1) }}</text>
        </view>
        <image src="/static/dashboard/discharge.png" mode="" />
      </view>
    </view>
  </view>
</template>

<script>
import { formatElectricity, formatPower } from "@/utils/utils";

export default {
  props: {
    dataPage: {},
  },
  data() {
    return {};
  },
  computed: {},
  onLoad() {},
  methods: {
    powerUnit(params, index) {
      let arr = formatPower(params).split(" ");
      return arr[index];
    },

    chargeUnit(params, index) {
      let arr = formatElectricity(params).split(" ");
      return arr[index];
    },

    showNumber(number) {
      return number ? number : 0;
    },
  },
};
</script>

<style lang="scss">
.content-box {
  width: 100%;
  margin-top: 24rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .content-box-item {
    width: 338rpx;
    padding: 39rpx 16rpx;
    box-sizing: border-box;
    background-color: #132034;
    margin-bottom: 18rpx;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      width: 100%;
      font-family: Alibaba PuHuiTi 3;
      font-size: 28rpx;
      font-weight: normal;
      font-variation-settings: "opsz" auto;
      color: #eeeeee;
      // white-space: nowrap;
    }
    .bottom-content {
      margin-top: 24rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .num {
        font-family: D-DIN;
        font-size: 40rpx;
        font-weight: bold;
        color: #ffffff;
        .unit {
          font-family: Alibaba PuHuiTi 3;
          font-size: 22rpx;
          font-weight: normal;
          line-height: 22px;
          font-variation-settings: "opsz" auto;
          color: #ffffff;
          margin-left: 10rpx;
        }
      }
      image {
        width: 67rpx;
        height: 71rpx;
        position: relative;
        bottom: -20rpx;
      }
    }
  }
}
</style>
